<template>
	<view class="common-main full-container"
		:class="themeStore.theme=='theme-blue'?'full-container-blue':'full-container-orange'"
		:style="{paddingTop: statusBarHeight}">
		<view class="header-content flex justify-content-space-between">
			<view style="width: 100rpx;" @click="onTapLeft"><eui-uicons color="#000" type="back" size="40" /></view>
			<view style="font-size: 18px;font-weight: 600;">详情</view>
			<view class="flex justify-content-flex-end" style=" padding-right: 30rpx;width: 100rpx;"></view>
		</view>
		<scroll-view scroll-y :style="{width:scrollWidth,height:scrollHeight}">
			<view class="flex padding-all-48 lign-items-center font-size-28">
				<view>
					<image :src="Info.personImg" @error="setErrorImg"
						style="width: 144rpx;height: 144rpx;border-radius: 50%;"></image>
				</view>
				<view class="flex flex-direction-column padding-left-24 align-self-center">
					<view class="font-size-36 font-weight-bold">{{Info.c_name}}</view>
					<view class="color-888 margin-top-12">{{Info.c_type?Info.c_type:'暂无分类'}}</view>
				</view>
			</view>
			<view class="flex flex-direction-column font-size-28" style="padding-top: 32rpx;">
				<view class="color-888" style="padding-left: 40rpx;">组织</view>
				<eui-card class="padding-left-20" leftPadding="20rpx" topMargin="0">
					<eui-card-input v-model="Info.c_store_name" title="机构" type="text" alignType="left" displayable
						hPadding="0" placeholder="" style="padding-right: 10px;" />
					<eui-card-input v-model="Info.c_depart_name" title="部门" type="text" alignType="left" displayable
						hPadding="0" placeholder="" style="padding-right: 10px;" />
					<eui-card-input v-model="Info.c_title" title="职务" type="text" alignType="left" displayable
						hPadding="0" placeholder="" :showBottomLine='false' style="padding-right: 10px;" />
				</eui-card>
				<view class="color-888" style="padding-left: 40rpx;margin-top: 24rpx;">联系方式</view>
				<eui-card class="padding-left-20" leftPadding="20rpx" topMargin="0">
					<eui-card-input v-model="Info.c_mobile_phone" title="移动电话" type="text" alignType="left" displayable
						hPadding="0" placeholder="" style="padding-right: 10px;" />
					<eui-card-input v-model="Info.c_phone" title="固话" type="text" alignType="left" displayable
						hPadding="0" placeholder="" style="padding-right: 10px;" />
					<eui-card-input v-model="Info.c_email" title="电子邮箱" type="text" alignType="left" displayable
						hPadding="0" placeholder="" :showBottomLine='false' style="padding-right: 10px;" />
				</eui-card>
			</view>
		</scroll-view>
		<view class="user-footer" v-if="Info.c_mobile_phone||Info.c_phone">
			<view class="user-footer-but" @click="OpenPhone"
				v-if="(Info.c_mobile_phone&&!Info.c_phone)||(!Info.c_mobile_phone&&Info.c_phone)">
				<button>拨打电话</button>
			</view>
			<view class="user-footer-but" v-if="Info.c_mobile_phone&&Info.c_phone">
				<picker @change="bindPhoneChange" :range="phoneArray">
					<button>拨打电话</button>
				</picker>
			</view>
			<view class="user-footer-but" @click="OpenSms" v-if="Info.c_mobile_phone||Info.c_phone">
				<button>发短信</button>
			</view>
			<view class="user-footer-but" @click="OpenSendMail"><button class="base2 button-theme"
					:class="[theme]">内部邮件</button></view>
		</view>
		<view class="user-footer" style="padding: 0px 85rpx;" v-else>
			<view class="user-footer-but" style="margin-right: 0px;" @click="OpenSendMail"><button class="base2 button-theme"
					:class="[theme]">内部邮件</button></view>
		</view>
	</view>
</template>

<script setup type="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import service from '../../../common/service';
	import { storeToRefs } from 'pinia';
	import { useMainStore } from '../../../store/modules/store';
	import { useLoginStore } from '../../../store/modules/useLoginStore';
	import { useThemeStore } from '../../../store/themeStore';
	const mainStore = useMainStore();
	const LoginStore = useLoginStore();
	const themeStore = useThemeStore(); // 主题
	const { theme } = storeToRefs(themeStore);
	
	const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight + 'px');
	const scrollWidth = ref(uni.getSystemInfoSync().windowWidth + 'px');
	const scrollHeight = ref(uni.getSystemInfoSync().windowHeight- 95 - uni.getSystemInfoSync().statusBarHeight + 'px');
	const Info = ref({});
	const phoneArray = ref(['移动电话', '固话'])
	
	const onTapLeft = () =>{
		uni.navigateBack();
	}
	const setErrorImg = () =>{
		Info.value.personImg = '/static/img/no_image.png';
	}
	const GetUserInfo = userno =>{
		service.enjoyShowLoading('正在加载...');
		let request = {
		    url: LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40通讯录",
		        ObjectData: userno,//mainStore.loginInfo.sUser,
		        MethodName: "GetUserInfo",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
				if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					const imgUrl = LoginStore.EnjoyMain.replace('/Enjoy/Service', '');
					Info.value = {
						...ObjectData[0],
						c_store_name:'['+ObjectData[0].c_store_id+']'+ObjectData[0].c_store_name,
						personImg:imgUrl + '/File/DownLoadImage/' + ObjectData[0].c_userno,
					};
				} else {
					service.enjoyShowToast(res.data.Exception.Message)
				}
				service.enjoyHideLoading();
		    }
			service.enjoyHideLoading();
		}, () => {
			service.enjoyHideLoading();
		    console.log('失败')
		});
	}
	const OpenPhone = () =>{
		if(Info.value.c_mobile_phone){
			const tel = Info.value.c_mobile_phone.trim();
			plus.runtime.openURL('tel:'+tel);
		}else{
			const tel = Info.value.c_phone.trim();
			plus.runtime.openURL('tel:'+tel);
		}
	}
	const bindPhoneChange = e =>{
		if(e.detail.value==0){
			const tel = Info.value.c_mobile_phone.trim();
			plus.runtime.openURL('tel:'+tel);
		}else{
			const tel = Info.value.c_phone.trim();
			plus.runtime.openURL('tel:'+tel);
		}
	}
	const OpenSms = () =>{
		const tel = Info.value.c_mobile_phone.trim();
		plus.runtime.openURL('sms:'+tel);
	}
	const OpenSendMail = () =>{
		uni.navigateTo({
			url: '/pages/OaViews/Email/WriteEmail?to='+Info.value.c_userno+'&tousername='+Info.value.c_name
		});
	}
	onLoad((e)=>{
		GetUserInfo(e.userno);
	})
</script>

<style lang="scss">
	.flex {
		display: flex;
	}

	.flex-direction-column {
		flex-direction: column;
	}

	.justify-content-space-between {
		justify-content: space-between !important;
	}

	.justify-content-flex-end {
		justify-content: flex-end;
	}

	.header-content {
		height: 88rpx;
		padding: 0 6px;
		align-items: center;
	}

	.padding-all-48 {
		padding: 48rpx;
	}

	.align-items-center {
		align-items: center;
	}

	.padding-left-24 {
		padding-left: 24rpx;
	}

	.font-size-36 {
		font-size: 36rpx
	}

	.font-size-28 {
		font-size: 28rpx
	}

	.font-weight-bold {
		font-weight: bold;
	}

	.color-888 {
		color: #888;
	}

	.margin-top-12 {
		margin-top: 12rpx;
	}

	.padding-left-20 {
		padding-left: 20rpx !important;
	}

	.user-footer {
		position: fixed;
		z-index: 9;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-left: 20rpx;
	}

	.user-footer-but {
		margin-right: 20rpx;
		flex: 1;

		button {
			width: 100%;
			height: 68rpx;
			font-size: 14px;
			padding: 0;
			margin: 0;
			border-radius: 20px;
			background-color: #ffffff;
			border: solid 1rpx #888;
			line-height: 34px;
		}

		.base2 {
			color: #fff;
			border: none;
		}

		.button-theme {
			background: var(--theme-bgc-color);
		}
	}

	.common-main {
		flex: 1;
		z-index: 10;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.full-container {
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #fff;
	}

	.full-container-blue {
		background-image: url('@/static/img/txl_profile_blue.png');
	}

	.full-container-orange {
		background-image: url('@/static/img/txl_profile_orange.png');
	}
	.align-self-center{
		align-self: center;
	}
</style>